<!--
 * @Description: 
 * @Autor: dyx
 * @Date: 2023-01-31 17:28:20
 * @LastEditTime: 2023-02-02 17:15:29
-->
<template>
  <el-dialog
    :title="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    class="JADP-dialog JADP-dialog_center"
    lock-scroll
    width="1000px"
  >
    <el-row :gutter="15" class="">
      <el-form
        ref="elForm"
        :model="dataForm"
        :rules="rules"
        size="small"
        label-width="200px"
        label-position="right"
        :disabled="!!isDetail"
      >
        <el-col :span="10">
          <el-form-item label="直播分类" prop="categore">
            <el-select
              v-model="dataForm.categore"
              placeholder="请选择"
              clearable
              :style="{ width: '100%' }"
              :multiple="false"
            >
              <el-option
                v-for="(item, index) in getDict('zhibofenlei')"
                :key="index"
                :label="item.dataName"
                :value="item.id"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="直播名称" prop="name">
            <el-input
              v-model="dataForm.name"
              placeholder="请输入"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="直播简介" prop="profile">
            <JADP-Quill v-model="dataForm.profile" placeholder="请输入内容...">
            </JADP-Quill>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="封面图片" prop="classcover">
            <JADP-UploadImg
              v-model="classCoverList"
              :fileSize="2"
              sizeUnit="MB"
              :limit="9"
            >
            </JADP-UploadImg>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="是否允许提前进入" prop="earlyentry">
            <el-radio-group v-model="dataForm.earlyentry" size="small">
              <el-radio
                v-for="(item, index) in getDict('sfyxtqjr')"
                :key="index"
                :label="item.id"
                :disabled="item.disabled"
              >
                {{ item.dataName }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="提前进入时间" prop="entrytime">
            <el-input-number
              v-model="dataForm.entrytime"
              placeholder="数字文本"
              :step="1"
            >
            </el-input-number>
            分钟
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="到结束时间是否立即结束观看" prop="endwatch">
            <el-radio-group v-model="dataForm.endwatch" size="small">
              <el-radio
                v-for="(item, index) in getDict('djssjsfljjsgk')"
                :key="index"
                :label="item.id"
                :disabled="item.disabled"
              >
                {{ item.dataName }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="是否录制视频" prop="recordvideo">
            <el-radio-group v-model="dataForm.recordvideo" size="small">
              <el-radio
                v-for="(item, index) in getDict('sflzsp')"
                :key="index"
                :label="item.id"
                :disabled="item.disabled"
              >
                {{ item.dataName }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="模式设置" prop="modeset">
            <el-radio-group v-model="dataForm.modeset" size="small">
              <el-radio
                v-for="(item, index) in getDict('mssz')"
                :key="index"
                :label="item.id"
                :disabled="item.disabled"
              >
                {{ item.dataName }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="24" v-if="isHideSubtable">
          <el-form-item label-width="0">
            <div class="JADP-common-title">
              <h2>直播场次</h2>
              <!-- <div class="exportAndImport btn"></div> -->
            </div>
            <el-table :data="dataForm.xy_zb_siteEntityList" size="mini">
              <el-table-column
                type="index"
                width="50"
                label="序号"
                align="center"
              />
              <el-table-column prop="sitename" label="场次名称">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.sitename"
                    placeholder="请输入"
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column prop="starttime" label="直播开始时间">
                <template slot-scope="scope">
                  <el-date-picker
                    v-model="scope.row.starttime"
                    placeholder="请选择"
                    clearable
                    :style="{ width: '100%' }"
                    type="datetime"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="timestamp"
                  >
                  </el-date-picker>
                </template>
              </el-table-column>
              <el-table-column prop="duration" label="直播时长">
                <template slot-scope="scope">
                  <el-input-number
                    v-model="scope.row.duration"
                    placeholder="数字文本"
                    :step="1"
                  >
                  </el-input-number>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="50">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    class="JADP-table-delBtn"
                    @click="handleDelxy_zb_siteEntityList(scope.$index)"
                    >删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="table-actions" @click="addHandlexy_zb_siteEntityList()">
              <el-button type="text" icon="el-icon-plus">新增</el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <ExportBox
      v-if="xy_zb_siteexportBoxVisible"
      ref="xy_zb_siteExportBox"
      @download="xy_zb_sitedownload"
    />
    <ImportBoxz
      v-if="xy_zb_siteimportBoxVisible"
      ref="xy_zb_siteimportBox"
      @refresh="reset()"
      @ImportPreviewApi="xy_zb_siteImportPreviewApi"
      @saveData="xy_zb_sitesaveData"
      @TemplateDownload="xy_zb_siteTemplateDownload"
      :URL="xy_zb_siteURL"
    />

    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button
        type="primary"
        @click="dataFormSubmit()"
        v-if="!isDetail"
        :loading="btnLoading"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import request from "@/utils/request";
import { getDictionaryDataSelector } from "@/api/systemData/dictionary";
import { previewDataInterface } from "@/api/systemData/dataInterface";
import ExportBox from "./ExportBox";
export default {
  components: { ExportBox },
  props: [],
  data() {
    return {
      //导入属性
      xy_zb_siteimportBoxVisible: false,
      xy_zb_siteURL: "xy_zb_base_info/Xy_zb_site",
      xy_zb_siteColumnList: [
        { prop: "sitename", label: "场次名称" },
        { prop: "starttime", label: "直播开始时间" },
        { prop: "duration", label: "直播时长" }
      ],
      //导出属性
      xy_zb_siteexportBoxVisible: false,
      xy_zb_siteEntityList: [],
      loading: false,
      visible: false,
      isDetail: false,
      activeName: "",
      dataForm: {
        categore: "",
        name: undefined,
        profile: undefined,
        classcover: [],
        earlyentry: "",
        entrytime: undefined,
        endwatch: "",
        recordvideo: "",
        modeset: "",
        creatoruserid: "",
        creatortime: "",
        xy_zb_siteEntityList: [],
        organizeId:"",
      },
      isHideSubtable: true,
      btnLoading: false,
      rules: {
        categore: [
          {
            required: true,
            message: "请选择",
            trigger: "change"
          }
        ],
        name: [
          {
            required: true,
            message: "请输入",
            trigger: "blur"
          }
        ],
        profile: [
          {
            required: true,
            message: "请输入内容...",
            trigger: "blur"
          }
        ],
        classcover: [
          {
            required: true,
            message: "请至少选择一个",
            trigger: "click"
          }
        ]
      },
      categoreOptions: [],
      classCoverList: [],
      classCover: [],
      earlyentryOptions: [],
      endwatchOptions: [],
      recordvideoOptions: [],
      modesetOptions: []
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    //导出按钮点击事件
    xy_zb_siteexportData() {
      this.xy_zb_siteexportBoxVisible = true;
      this.$nextTick(() => {
        this.$refs.xy_zb_siteExportBox.init(this.xy_zb_siteColumnList);
      });
    },
    //导出弹出层回调函数
    xy_zb_sitedownload(data) {
      let query = { ...data, ...this.listQuery, ...this.query,organizeId :this.$store.getters.organizeId };
      request({
        url: `/api/xy_zb_base_info/Xy_zb_site/Actions/Export`,
        method: "post",
        data: query
      }).then(res => {
        if (!res.data.url) return;
        window.location.href = this.define.comUrl + res.data.url;
        this.$refs.xy_zb_siteExportBox.visible = false;
        this.xy_zb_siteexportBoxVisible = false;
      });
    },
    //导入预览事件
    xy_zb_siteImportPreviewApi(val) {
      let query = { fileName: val };
      request({
        url: `/api/xy_zb_base_info/Xy_zb_site/ImportPreview`,
        method: "get",
        data: query
      })
        .then(res => {
          this.xy_zb_siteEntityList = res.data.dataRow;
          this.$refs.xy_zb_siteimportBox.list = res.data.dataRow;
          this.$refs.xy_zb_siteimportBox.btnLoading = false;
          this.$refs.xy_zb_siteimportBox.active++;
        })
        .catch(() => {
          this.$refs.xy_zb_siteimportBox.btnLoading = false;
        });
    },
    //下载导入模板事件
    xy_zb_siteTemplateDownload() {
      request({
        url: `/api/xy_zb_base_info/Xy_zb_site/templateDownload`,
        method: "post"
      }).then(res => {
        if (!res.data.url) return;
        window.location.href = this.define.comUrl + res.data.url;
      });
    },
    //上传附件事件
    xy_zb_siteuploadForm() {
      this.xy_zb_siteimportBoxVisible = true;
      this.$nextTick(() => {
        this.$refs.xy_zb_siteimportBox.init(this.xy_zb_siteColumnList);
      });
    },
    xy_zb_sitesaveData() {
      this.xy_zb_siteEntityList.map(item =>
        this.dataForm.xy_zb_siteEntityList.push(item)
      );
      this.$refs.xy_zb_siteimportBox.visible = false;
    },
    init(id, isDetail) {
      this.classCoverList = [];
      this.dataForm.xy_zb_siteEntityList = [];
      this.dataForm.id = id || 0;
      this.visible = true;
      this.isDetail = isDetail || false;
      this.$nextTick(() => {
        this.$refs["elForm"].resetFields();
        if (this.dataForm.id) {
          this.loading = true;
          //隐藏子表
          this.isHideSubtable = false;
          request({
            url: "/api/xy_zb_base_info/Xy_zb_base_info/" + this.dataForm.id,
            method: "get"
          }).then(res => {
            this.dataForm = res.data;
            this.classCoverList = this.dataForm.classcover
              ? JSON.parse(this.dataForm.classcover)
              : [];
            this.dataForm.xy_zb_siteEntityList = this.dataForm
              .xy_zb_siteEntityList
              ? this.dataForm.xy_zb_siteEntityList
              : [];
            this.loading = false;
          });
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.dataForm.organizeId = this.$store.getters.organizeId;
      this.$set(
        this.dataForm,
        "classcover",
        this.classCoverList.length ? JSON.stringify(this.classCoverList) : ""
      );
      this.$refs["elForm"].validate(valid => {
        if (valid) {
          if (!this.subtableCheck()) {
            return;
          }
          if (!this.dataForm.id) {
            this.btnLoading = true;
            request({
              url: `/api/xy_zb_base_info/Xy_zb_base_info`,
              method: "post",
              data: this.dataForm
            }).then(res => {
              this.$message({
                message: res.msg,
                type: "success",
                duration: 1000
              });
              this.visible = false;
              this.$emit("refresh", true);
              this.btnLoading = false;
            });
          } else {
            request({
              url: "/api/xy_zb_base_info/Xy_zb_base_info/" + this.dataForm.id,
              method: "PUT",
              data: this.dataForm
            }).then(res => {
              this.$message({
                message: res.msg,
                type: "success",
                duration: 1000,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refresh", true);
                }
              });
            });
          }
        }
      });
    },
    //子表校验
    subtableCheck() {
      //判断子表是否有数据，没有则不提交
      if (!this.dataForm.xy_zb_siteEntityList.length) {
        this.$message({
          message: "请添加直播场次,直播场次不可为空",
          type: "warning",
          duration: 2000
        });
        return false;
      }
      //判断子表如果有数据，每一项必须为必填
      for (let i = 0; i < this.dataForm.xy_zb_siteEntityList.length; i++) {
        if (
          !this.dataForm.xy_zb_siteEntityList[i].sitename ||
          !this.dataForm.xy_zb_siteEntityList[i].starttime ||
          !this.dataForm.xy_zb_siteEntityList[i].duration
        ) {
          this.$message({
            message: "请填写直播场次的直播场次名称、开始时间、结束时间",
            type: "warning",
            duration: 2000
          });
          return false;
        }
      }
      return true;
    },
    addHandlexy_zb_siteEntityList() {
      let item = {
        sitename: undefined,
        starttime: undefined,
        duration: undefined
      };
      this.dataForm.xy_zb_siteEntityList.push(item);
    },
    handleDelxy_zb_siteEntityList(index) {
      this.dataForm.xy_zb_siteEntityList.splice(index, 1);
    }
  }
};
</script>
